<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
  <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
  <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
  <meta name="author" content="ajiho">
  <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../lib/bootstrap-select/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
  <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
  <!--  正文内容放置在此处  -->

  <div class="row g-3">
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          基本示例
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <option>香蕉</option>
            <option>苹果</option>
            <option>葡萄</option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          使用 optgroups
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <optgroup label="动物">
              <option>哈士奇</option>
              <option>金毛</option>
              <option>拉布拉多</option>
            </optgroup>
            <optgroup label="植物">
              <option>菊花</option>
              <option>桃花</option>
              <option>荷花</option>
            </optgroup>
          </select>

        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          多选框
        </div>
        <div class="card-body">
          <select class="selectpicker" multiple>
            <option>香蕉</option>
            <option>苹果</option>
            <option>葡萄</option>
          </select>

        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          实时搜索
        </div>
        <div class="card-body">
          <select class="selectpicker" data-live-search="true">
            <option data-tokens="曹雪芹">红楼梦</option>
            <option data-tokens="吴承恩">西游记</option>
            <option data-tokens="罗贯中">三国演义</option>
            <option data-tokens="施耐庵">水浒传</option>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          限制选择的数量
        </div>
        <div class="card-body">
          <select class="selectpicker" multiple data-max-options="2">
            <option data-tokens="曹雪芹">红楼梦</option>
            <option data-tokens="吴承恩">西游记</option>
            <option data-tokens="罗贯中">三国演义</option>
            <option data-tokens="施耐庵">水浒传</option>
          </select>

          <select class="selectpicker" multiple>
            <optgroup label="动物" data-max-options="2">
              <option>哈士奇</option>
              <option>金毛</option>
              <option>拉布拉多</option>
            </optgroup>
            <optgroup label="植物" data-max-options="2">
              <option>菊花</option>
              <option>桃花</option>
              <option>荷花</option>
            </optgroup>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          占位符
        </div>
        <div class="card-body">
          <select class="selectpicker" multiple title="请选择你爱的书籍">
            <option data-tokens="曹雪芹">红楼梦</option>
            <option data-tokens="吴承恩">西游记</option>
            <option data-tokens="罗贯中">三国演义</option>
            <option data-tokens="施耐庵">水浒传</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          使用选项上设置的title作为选定的文本
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <option title="曹雪芹">红楼梦</option>
            <option title="吴承恩">西游记</option>
            <option title="罗贯中">三国演义</option>
            <option title="施耐庵">水浒传</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          选定的文本格式
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <select class="selectpicker" multiple data-selected-text-format="values">
                <option>菊花</option>
                <option>桃花</option>
                <option>荷花</option>
              </select>
            </div>
            <div class="col-md-6">
              <select class="selectpicker" multiple data-selected-text-format="count">
                <option>菊花</option>
                <option>桃花</option>
                <option>荷花</option>
              </select>
            </div>
            <div class="col-md-6">
              <select class="selectpicker" multiple data-selected-text-format="count > 3">
                <option>红楼梦</option>
                <option>西游记</option>
                <option>三国演义</option>
                <option>水浒传</option>
              </select>
            </div>
            <div class="col-md-6">
              <select class="selectpicker" multiple data-selected-text-format="static" title="请选择你爱的狗狗">
                <option>哈士奇</option>
                <option>金毛</option>
                <option>拉布拉多</option>
              </select>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          主题色
        </div>
        <div class="card-body">
          <select class="selectpicker" title="请选择你爱的狗狗" data-style="btn-primary">
            <option>哈士奇</option>
            <option>金毛</option>
            <option>拉布拉多</option>
          </select>
          <select class="selectpicker" title="请选择你爱的狗狗" data-style="btn-info">
            <option>哈士奇</option>
            <option>金毛</option>
            <option>拉布拉多</option>
          </select>
          <select class="selectpicker" title="请选择你爱的狗狗" data-style="btn-success">
            <option>哈士奇</option>
            <option>金毛</option>
            <option>拉布拉多</option>
          </select>
          <select class="selectpicker" title="请选择你爱的狗狗" data-style="btn-warning">
            <option>哈士奇</option>
            <option>金毛</option>
            <option>拉布拉多</option>
          </select>
          <select class="selectpicker" title="请选择你爱的狗狗" data-style="btn-danger">
            <option>哈士奇</option>
            <option>金毛</option>
            <option>拉布拉多</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          给已经选中的选项上添加对色的图标
        </div>
        <div class="card-body">
          <select class="selectpicker show-tick">
            <option>桃子</option>
            <option>李子</option>
            <option>榴莲</option>
          </select>


        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          可以给选项设置样式
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <option>酷狗音乐</option>
            <option style="background: #fdda00; color: #fff;">QQ音乐</option>
            <option style="background: #5cb85c; color: #fff;">网易云音乐</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          宽度(栅格系统、auto、fit、100px、75%)
        </div>
        <div class="card-body">

          <div class="row">
            <div class="col">
              <select class="selectpicker form-control">
                <option>游泳</option>
                <option>网球</option>
                <option>铁人三项</option>
              </select>
            </div>
          </div>
          <select class="selectpicker" data-width="auto">
            <option>游泳</option>
            <option>网球</option>
            <option>铁人三项</option>
          </select>
          <select class="selectpicker" data-width="fit">
            <option>游泳</option>
            <option>网球</option>
            <option>铁人三项</option>
          </select>
          <select class="selectpicker" data-width="100px">
            <option>游泳</option>
            <option>网球</option>
            <option>铁人三项</option>
          </select>
          <select class="selectpicker" data-width="75%">
            <option>游泳</option>
            <option>网球</option>
            <option>铁人三项</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          图标
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <option data-icon="bi bi-alipay">支付宝</option>
            <option data-icon="bi bi-wechat">微信</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          自定义html内容
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <option data-content='<span class="badge text-bg-primary">桃子</span>'>桃子</option>
            <option data-content='<span class="badge text-bg-success">李子</span>'>李子</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          选项上的副标题
        </div>
        <div class="card-body">
          <select class="selectpicker" data-size="5">
            <option data-subtext="重辣">贵州菜</option>
            <option data-subtext="重辣">四川菜</option>
            <option data-subtext="微辣">闵菜</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          下拉菜单尺寸
        </div>
        <div class="card-body">
          <select class="selectpicker" data-size="auto">
            <option value="">选项 1</option>
            <option value="">选项 2</option>
            <option value="">选项 3</option>
            <option value="">选项 4</option>
            <option value="">选项 5</option>
            <option value="">选项 6</option>
            <option value="">选项 7</option>
            <option value="">选项 8</option>
            <option value="">选项 9</option>
            <option value="">选项 10</option>
            <option value="">选项 11</option>
            <option value="">选项 12</option>
            <option value="">选项 13</option>
            <option value="">选项 14</option>
            <option value="">选项 15</option>
            <option value="">选项 16</option>
            <option value="">选项 17</option>
            <option value="">选项 18</option>
            <option value="">选项 19</option>
            <option value="">选项 20</option>
          </select>
          <select class="selectpicker" data-size="false">
            <option value="">选项 1</option>
            <option value="">选项 2</option>
            <option value="">选项 3</option>
            <option value="">选项 4</option>
            <option value="">选项 5</option>
            <option value="">选项 6</option>
            <option value="">选项 7</option>
            <option value="">选项 8</option>
            <option value="">选项 9</option>
            <option value="">选项 10</option>
            <option value="">选项 11</option>
            <option value="">选项 12</option>
            <option value="">选项 13</option>
            <option value="">选项 14</option>
            <option value="">选项 15</option>
            <option value="">选项 16</option>
            <option value="">选项 17</option>
            <option value="">选项 18</option>
            <option value="">选项 19</option>
            <option value="">选项 20</option>
          </select>
          <select class="selectpicker" data-size="5">
            <option value="">选项 1</option>
            <option value="">选项 2</option>
            <option value="">选项 3</option>
            <option value="">选项 4</option>
            <option value="">选项 5</option>
            <option value="">选项 6</option>
            <option value="">选项 7</option>
            <option value="">选项 8</option>
            <option value="">选项 9</option>
            <option value="">选项 10</option>
            <option value="">选项 11</option>
            <option value="">选项 12</option>
            <option value="">选项 13</option>
            <option value="">选项 14</option>
            <option value="">选项 15</option>
            <option value="">选项 16</option>
            <option value="">选项 17</option>
            <option value="">选项 18</option>
            <option value="">选项 19</option>
            <option value="">选项 20</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          选择/取消选择所有选项
        </div>
        <div class="card-body">
          <select class="selectpicker" multiple data-actions-box="true">
            <option>贵州菜</option>
            <option>四川菜</option>
            <option>闵菜</option>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          分割线
        </div>
        <div class="card-body">
          <select class="selectpicker" data-size="20">
            <option value="">选项 1</option>
            <option value="">选项 2</option>
            <option value="">选项 3</option>
            <option value="">选项 4</option>
            <option value="">选项 5</option>
            <option value="">选项 6</option>
            <option value="">选项 7</option>
            <option data-divider="true"></option>
            <option value="">选项 9</option>
            <option value="">选项 10</option>
            <option value="">选项 11</option>
            <option value="">选项 12</option>
            <option value="">选项 13</option>
            <option data-divider="true"></option>
            <option value="">选项 15</option>
            <option value="">选项 16</option>
            <option value="">选项 17</option>
            <option value="">选项 18</option>
            <option value="">选项 19</option>
            <option value="">选项 20</option>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          菜单标题
        </div>
        <div class="card-body">
          <select class="selectpicker" data-header="请选择你爱吃的菜">
            <option>贵州菜</option>
            <option>四川菜</option>
            <option>闵菜</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          指定容器解决父容器可能设置overflow: hidden样式的问题
        </div>
        <div class="card-body">
          <div class="overflow-hidden">
            <select class="selectpicker" data-header="请选择你爱吃的菜">
              <option>贵州菜</option>
              <option>四川菜</option>
              <option>闵菜</option>
            </select>
            <select class="selectpicker" data-container="body">
              <option>贵州菜</option>
              <option>四川菜</option>
              <option>闵菜</option>
            </select>
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          强制指定下拉菜单的弹出方向
        </div>
        <div class="card-body">
          <select class="selectpicker dropup" data-dropup-auto="false">
            <option>贵州菜</option>
            <option>四川菜</option>
            <option>闵菜</option>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          禁用选择框
        </div>
        <div class="card-body">
          <select class="selectpicker" disabled>
            <option>贵州菜</option>
            <option>四川菜</option>
            <option>闵菜</option>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          禁用选项
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <option>贵州菜</option>
            <option disabled>四川菜</option>
            <option>闵菜</option>
          </select>

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
          禁用选项组
        </div>
        <div class="card-body">
          <select class="selectpicker">
            <optgroup label="动物" disabled>
              <option>哈士奇</option>
              <option>金毛</option>
              <option>拉布拉多</option>
            </optgroup>
            <optgroup label="植物">
              <option>菊花</option>
              <option>桃花</option>
              <option>荷花</option>
            </optgroup>
          </select>
        </div>
      </div>
    </div>
  </div>


  <!--回到顶部开始-->
  <a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
  <!--回到顶部结束-->

</div>

<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="../lib/bootstrap-select/dist/js/i18n/defaults-zh_CN.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<script>
  $(document).ready(function (e) {
    //你的逻辑
    $('select').selectpicker();

  })
</script>
</body>
</html>
